<template>
  <div>
    <div class="header">
      <a-button @click="getData" :loading="loading">导入</a-button>
      <a-button  @click="handelCancel">取消</a-button>
    </div>

    <!-- luckysheet容器 -->
    <div
      id="luckysheet"
      style="
        margin: 0px;
        padding: 0px;
        height:600px;
        position: absolute;
        width: 100%;
        left: 0px;
        top: 50px;
        bottom: 0px;
      "
    ></div>
  </div>
</template>
<script>
export default {
  name: "ExcleEditor",
  props: {
    show: {
      type: Boolean,
      default: false,
    },
    title: {
      type: String,
      default: "在线表格编辑器",
    },
    headers:{
      type:Array,
      default:[]
    },
    loading:{
      type:Boolean,
      default:false
    },
  },
  data() {
   
    return {
      
      celldata:luckysheet.transToCellData([]),
      options: {
        container: "luckysheet",
        title: this.title, //表 头名
        lang: "zh", //中文
        showtoolbar: true, //是否显示工具栏
        showinfobar: false, //是否显示顶部信息栏
        showsheetbar: true, //是否显示底部sheet按钮,
        allowUpdate:true,
        data:[{celldata:luckysheet.transToCellData([this.headers])}],
      },
    };
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {
      if(!!window.luckysheet ){
        window.luckysheet.destroy();
      }
      
      window.luckysheet.create(this.options).setHorizontalFrozen(false);      
      // console.log(luckysheet.getCellValue(0, 0))
    },
    getData() {
      let data = luckysheet.getAllSheets();
      this.$emit("close", data);
      console.log(data)
     
    },
    destroy(){
       if(!!window.luckysheet ){
        window.luckysheet.destroy();
      }
       
    },
    // 本地上传
    handelCancel() {
      this.$emit("close", null);
     
    }
  },
  destroyed() {
    this.destroy();
  },
};
</script>
<style>
* {
  margin: 0;
  padding: 0;
}
.printHideCss {
  visibility: hidden !important;
}
.el-form-item>>>.el-form-item__error {
  color: #31a0e1;
  font-size: 12px;
  line-height: 1;
  padding-top: 4px;
  position: relative;
  top: 100%;
  left: 0;
}
  .header{
    position: absolute;
    top: 0px;
    height: 50px;
    line-height: 50px;
    background: #ffffff;
    right: 0;
    left: 0;
  }
  .header button{
    margin:0 10px;
  }
</style>
